<template>
    <section>
        <div class="wrapper">
            <h2>活动参与</h2>
            <van-field v-model="obj.userName" label="姓名" input-align="right" disabled is-link/>
            <van-field v-model="obj.userSex" label="性别" input-align="right" disabled is-link/>
            <van-field v-model="obj.department" label="工作部门" input-align="right" disabled is-link/>
            <van-field v-model="obj.userMobile" type="tel" label="联系电话" input-align="right" is-link/>
<!--            <div class="AUploading">-->
<!--                <span class="tit">附件</span>-->
<!--                <van-uploader v-model="fileList" :max-count="3"  :max-size="1024 * 1024 * 8"  @oversize="oversize" @delete="ADDelete" :after-read="afterRead" accept=".png,.PNG,.jpg,.JPG" />-->
<!--                <span class="tip">支持上传1-3张图片（jpg、png格式），且单张图片大小不超过8M</span>-->
<!--            </div>-->
            <p>
                <button @click="register">提交</button>
            </p>
        </div>
    </section>
</template>
<script>
import api from "@/data/api/index.js";

import Vue from 'vue';
import { Field } from 'vant';
import { Cell } from 'vant';
import { RadioGroup, Radio,Uploader  } from 'vant';
import { Toast } from 'vant';
import 'vant/lib/index.css';

Vue.use(Field);
Vue.use(Cell);
Vue.use(Radio);
Vue.use(RadioGroup).use(Uploader);
Vue.use(Toast);

export default {
    data(){
        return{
            obj:{
                activityId: '',
                userId: '',
                userName: '',
                userSex: '',
                department: '',
                userMobile: '',
                attachmentStr:[],
            },
            fileList: [],
        }
    },
    methods: {
        // 获取当前用户信息
        getUserInfo(){
            let user=JSON.parse(sessionStorage.getItem("user"));
            this.obj.userId = user.userId;
            this.obj.userName = user.userName;
            this.obj.userMobile = user.userMobile;
            this.obj.userSex = user.userSex;
            this.obj.department = user.userOrganName;
            let orgInfoList = JSON.parse(sessionStorage.getItem("orgInfoList"));
            if(orgInfoList?.length > 0){
              this.userInfo.userOrgan = orgInfoList[0].code;
              this.userInfo.userOrganName = orgInfoList[0].name;
            }
        },
        // 报名
        register(){
            // if(this.obj.attachmentStr.length==0){
            //     Toast("附件不能为空！");
            //     return
            // }
            let tel=this.obj.userMobile;
            if(!tel){
                Toast("联系电话，不能为空");
                return;
            }
            let patt= /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
            if(!patt.test(tel)){
                Toast("电话号码格式错误！");
                return;
            }
            this.obj.attachmentStr=JSON.stringify(this.obj.attachmentStr)
            api.activityEnter(this.obj).then(res => {
                if(res.code=='success'){
                    Toast('谢谢您的参与！');
                    this.$router.go(-1)
                }else{
                    Toast(res.desc);
                }

            });
        },
        // 文件上传成功
        afterRead(file) {
                let form = new FormData()
                form.append('file',file.file)
console.log('上传数据',form)
            file.status = 'uploading';
            file.message = '上传中...';
            console.log('file',file)
            api.AUploading(form).then(res=>{
                    if(res.code=='success'){
                        let arr={
                            extName: res.data[0].extName,
                            originName: res.data[0].originName,
                            size: res.data[0].size,
                            url: res.data[0].url,
                        }
                        if(typeof this.obj.attachmentStr=='string'){
                            this.obj.attachmentStr= JSON.parse(this.obj.attachmentStr)
                        }
                        this.obj.attachmentStr=this.obj.attachmentStr.concat(arr)
                        file.status = 'done';
                        file.message = '';
                    }else{
                        file.status = 'failed';
                        file.message = '上传失败';
                    }

            })

        },
        // 文件超出大小
        oversize(){
            Toast('上传的附件大小不能超过8M！');
        },
        // 文件删除
        ADDelete(obj){
            this.obj.attachmentStr=this.obj.attachmentStr.filter(item => item.originName!==obj.file.name )
        },
    },
    mounted(){
        let str=this.$route.query.tdata;
        this.obj.activityId=JSON.parse(str).id;
        this.getUserInfo();
    }
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% - 46px);
}
.wrapper{
    padding: 4px;
    font-size: 16px;
    box-sizing: border-box;
    h2{
        display: inline-flex;
        position: relative;
        font-size: 20px;
        margin: 21px 16px 25px;
        z-index: 1;
        &::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 1px;
            height: 5px;
            background-color: #C9151E;
            z-index: -1;
        }
    }
    >p{
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 25px;
        button{
            display: block;
            width: 100%;
            height: 53px;
            color: #fff;
            font-size: 20px;
            background-color: #9E0F16;
            border-radius: 28px;
        }
    }
    .AUploading{
        font-size: 14px;
        >span.tit{
            display: block;
        }
        >span.tip{
            display: block;
            color: #999;
            text-align: center;
        }
        .van-uploader{
            margin-top: 10px;
            width: 90vw;
        }
        ::v-deep .van-uploader__upload{
            width: 90vw;
        }
        ::v-deep .van-uploader__upload-icon{
            font-size: 36px;
        }
    }
}
</style>
